<template>
  <div id="record-wrapper">
      <h2>记录血糖</h2>
      <van-form @submit="onSubmit">
        <van-field
            readonly
            clickable
            name="calendar"
            :value="form.date"
            label="日期"
            placeholder="点击选择日期"
            :rules="[{ required: true, message: '请选择日期' }]"
            @click="showCalendar = true"
        />
        <van-calendar v-model="showCalendar" @confirm="onConfirm" />
        <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="form.time"
            label="时间"
            placeholder="点击选择时间"
            :rules="[{ required: true, message: '请选择时间' }]"
            @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
                type="time"
                @confirm="onConfirmTime"
                @cancel="showPicker = false"
                :filter="filter"
            />
        </van-popup>
        <van-field v-model="form.sugar" type="number" label="血糖" placeholder="输入血糖" :rules="[{ required: true, message: '请输入血糖' }]" />
        <van-field
            v-model="form.desc"
            rows="3"
            autosize
            label="备注"
            type="textarea"
            maxlength="100"
            placeholder="请输入备注"
            show-word-limit
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
    data() {
        return {
            showCalendar: false,
            showPicker: false,
            form: {
                date: '',
                time: '',
                sugar: '',
                desc: ''
            }
        }
    },
    methods: {
        filter(type, options) {
            if (type === 'minute') {
                return options.filter((option) => option % 30 === 0);
            }
            return options;
        },
        formatDate(date) {
            let mon = date.getMonth() + 1
            let day = date.getDate()
            if (mon < 10) {
                mon = '0' + mon
            }
            if (day < 10) {
                day = '0' + day
            }
            return `${date.getFullYear()}-${mon}-${day}`
        },
        onConfirm(date) {
            console.log(date)
            this.form.date = this.formatDate(date);
            this.showCalendar = false;
        },
        onConfirmTime(time) {
            this.form.time = time;
            this.showPicker = false;
        },
        onSubmit(values) {
            console.log(this.form)
            console.log('submit', values);
            let log = []
            if (localStorage.getItem('bloodlog')) {
                log = JSON.parse(localStorage.getItem('bloodlog'))
                log.unshift(this.form)
            } else {
                log = [
                    {...this.form}
                ]
            }
            localStorage.setItem('bloodlog', JSON.stringify(log))
            this.form = {}
            Toast.success('提交成功');
            setTimeout(() => {
                this.$router.push('/')
            }, 1000)
        }
    }
}
</script>

<style lang="less">
#record-wrapper {
    font-size: 16px !important;
    h2 {
        text-align: center;
    }
}
</style>